/*
 * @Author: your name
 * @Date: 2020-12-12 16:25:25
 * @LastEditTime: 2020-12-18 13:47:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\proj_steam\src\js\detail\detail.js
 */
require(['../config'],()=>{
    require(['template','swiper','jquery','header','footer','nav','cookie'],(template, Swiper)=>{
        class Detail{
            constructor(){
                this.getDetailData()
                this.getCookie()
            }
            // 获取数据
            getDetailData(){
                // 获取传入地址栏的 id
                const id = window.location.search.slice(1)

                // 处理返回的数据
                $.get('/api/app/mock/273331/index/games', res => {
                    if(res.code === 200){
                        const listGame = []
                        for(let key in res.focusGame){
                            listGame.push(res.focusGame[key])
                        }
                        for(let key in res.recGame){
                            for(let key1 in res.recGame[key]){
                                listGame.push(res.recGame[key][key1])
                            }
                        }
                        console.log(listGame)
                        
                        listGame.forEach(item => {

                            if(item.id == id){

                                $('#detailSwiper').html(template('detailSwiperTemplate',{gameShow : item.detail.images.imgShow
                                }))


                            // $('#pageContent').html(template('pageContentTemplate',{game : item}))
                                $('#game-type').find('span').text(item.detail.type.type1)
                                $('#game-title-name').text(item.name)
                                $('.page-header').text(item.name)
                                

                                $('#gameDesc').html(template('gameDescTemplate',{game : item}))
                               
                
                            // $('#priceDiscount').html(template('priceDiscountTemplate',{game : item}))
                                $('.game-price-title > h1').text(`购买 ${item.name}`)
                                $('.discount-pct').text(`-${item.discountPct}%`)
                                $('.origin-price > span').text(item.originPrice)
                                $('.final-price > span').text(item.finalPrice)
                                

                                $('#eventNotice').html(template('eventNoticeTemplate',{gameEvent : item.detail.event}))


                                $('#aboutContent').html(template('aboutContentTemplate',{gameAbout : item.detail.about}))


                                $('#achievement').html(template('achievementTemplate',{gameAchieve : item.detail.achieve}))

                                
                                $('#gameMessage').html(template('gameMessageTemplate',{game : item}))


                            // $('#score').html(template('scoreTemplate',{game : item}))
                                $('#score').text(item.score)

                                const name = item.name,
                                    originPrice = item.originPrice,
                                    finalPrice = item.finalPrice,
                                    img = item.imgList,
                                    id = item.id
                                    
                                this.newSwiper()
                                this.changeCount()
                                this.addToCart(name,originPrice,finalPrice,img,id)
                            }
                        })
                        

                    }
                })
            }

            // 轮播图
            newSwiper(){
                var galleryThumbs = new Swiper('.gallery-thumbs', {
                    spaceBetween: 5,
                    slidesPerView: 4,
                    virtualTranslate:true,
                    watchSlidesVisibility: true,
                    watchSlidesProgress: true,
                    
                    autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                  },
                });
                var galleryTop = new Swiper('.gallery-top', {
                    effect: 'fade',
                    autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                  },
                    fadeEffect: {
                        crossFade: true,
                    },
                    thumbs: {
                        swiper: galleryThumbs
                    }
                });
            }

            // 点击增加或减少数量
            changeCount(){
                const finalprice = $('.final-price > span').text(),
                    originprice = $('.origin-price > span').text()
                    let count = $('#countInput').val()

                $('#addBtn').click(function(){
                    count++
                    $('#countInput').val(count)
                    
                    $('.final-price > span').text(finalprice * count)
                    $('.origin-price > span').text(originprice * count)
                })

                $('#reduceBtn').click(function(){
                    count--
                    if(count <= 1){
                        count = 1
                    }
                    $('#countInput').val(count)
                    
                    $('.final-price > span').text(finalprice * count)
                    $('.origin-price > span').text(originprice * count)
                })

                
                
            }

            // 添加购物车
            addToCart(name,originPrice,finalPrice,img,id){
                $('#addCartBtn').click(function(){
                    const count = $('#countInput').val()
                    console.log(name,originPrice,finalPrice,img,id,count)
                    
                    // 判断 localStorage 里有没有 list
                    let list = JSON.parse(localStorage.getItem('list'))
                    if(list){
                        // 如果进入 这个条件，就代表 list 存在
                        // 再判断 localStorage 保存的商品 是否和我 当前的商品一样
                        const hasData = list.some(item => {
                            return item.id === id
                        })
                        if(hasData){
                            // 如果进入 这个条件，代表 保存的商品和当前商品一致
                            // 那么就让这个数据的数量 加上 count
                            list.forEach(item => {
                                if(item.id === id){
                                    item.count = item.count - 0 + (count - 0)
                                }
                            })
                        }else{
                            list.push({name,originPrice,finalPrice,img,id,count})
                        }

                        // 存储到 localStorage
                        localStorage.setItem('list',JSON.stringify(list))

                    }else{
                        // 进入这个条件 代表 list 没有数据
                        localStorage.setItem('list',JSON.stringify([{name,originPrice,finalPrice,img,id,count}]))
                    }
                    window.open('/html/cart/cart.html','_self')
                })
            }

            getCookie(){
                if ($.cookie('userInfo')) {

                    if ($.cookie('userInfo') === 'null') {
                        $('.tips').css({display:'block'})
                        $('.functionBtns').css({display:'none'})
                        $('.public').css({display:'block'})
                        $('.person').css({display:'none'})
                        
                    } else {
                        $('.tips').css({display:'none'})
                        $('.functionBtns').css({display:'flex'})
                        $('.public').css({display:'none'})
                        $('.person').css({display:'block'})

                    }
                } else {
                    $('.tips').css({display:'block'})
                    $('.functionBtns').css({display:'none'})
                    $('.public').css({display:'block'})
                    $('.person').css({display:'none'})
                    
                }
            }     
            
        }
        return new Detail()
    })
})